.reseau_sociaux{
    position: relative;
    margin: 6px 6px 0px 6px;
    border-radius: 10px;
    padding:6px;
}

.reseau_sociaux dl{
    float:left;
    position:relative;
    left: 35px;
    width:150px;
    height:155px;
    color:#324040;
    text-align:center;

    background:#547CFE;
    background:-webkit-linear-gradient(#547CFE,#48dfff);
    background:-moz-linear-gradient(#547CFE,#48dfff);
    background:-ms-linear-gradient(#547CFE,#48dfff);
    background:-o-linear-gradient(#547CFE,#48dfff);
    background:linear-gradient(#547CFE,#48dfff);
    border-radius:5px;
    -webkit-box-shadow:0px 0px 6px rgba(0,0,0,0.7);
    box-shadow:0px 0px 6px rgba(0,0,0,0.7);
    -webkit-transform-origin:50% 120px;
    -moz-transform-origin:50% 120px;
    -ms-transform-origin:50% 120px;
    -o-transform-origin:50% 120px;
    transform-origin:50% 120px; 
    -webkit-animation:bounceOut 0.7s ease-in-out;
    -moz-animation:bounceOut 0.7s ease-in-out;
    -ms-animation:bounceOut 0.7s ease-in-out;
    -o-animation:bounceOut 0.7s ease-in-out;
    animation:bounceOut 0.7s ease-in-out;
}

.reseau_sociaux .masque{
    position: relative;
    height: 61px;
    background-color: #444;
    border-radius: 5px;
    -moz-box-shadow: 3px 3px 7px black;
    -webkit-box-shadow: 3px 3px 7px black;
    box-shadow: 3px 3px 7px black;
    color: white;
    padding-top: 74px;
    /*background:-webkit-linear-gradient(#324040,#627878);
    background:-moz-linear-gradient(#324040,#627878);
    background:-ms-linear-gradient(#324040,#627878);
    background:-o-linear-gradient(#324040,#627878);
    background:linear-gradient(#324040,#627878);*/
}

.reseau_sociaux .ombre{
    position:relative;
    width:220px;
    height:5px;
    top: -103px;
    
    -webkit-box-shadow:0px 100px 3px black;
    box-shadow:0px 100px 3px black;
    border-radius:75px 75px 75px 75px / 3px 3px 3px 3px;
}

.reseau_sociaux dt{
    position:absolute;
    bottom:0px;
    width:100%;
    height:30px;
    padding-top:5px;
}

.reseau_sociaux dd{
    -webkit-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    -ms-transform:rotate(180deg);
    -o-transform:rotate(180deg);
    transform:rotate(180deg);
}

.reseau_sociaux dd a{
    display:block;
    height:24px;
    padding:3px 0px;
    color:#324040;
    text-decoration:none;
}

.reseau_sociaux dd a:hover{
    background:rgba(255,255,255,0.1);
}

.reseau_sociaux dl:hover{
    -webkit-transform:rotate(-180deg);
    -moz-transform:rotate(-180deg);
    -mstransform:rotate(-180deg);
    -o-transform:rotate(-180deg);
    transform:rotate(-180deg);
    -webkit-animation:bounceIn 0.7s ease-in-out;
    -moz-animation:bounceIn 0.7s ease-in-out;
    -ms-animation:bounceIn 0.7s ease-in-out;
    -o-animation:bounceIn 0.7s ease-in-out;
    animation:bounceIn 0.7s ease-in-out;
}

@-webkit-keyframes bounceIn {
from {-webkit-transform:rotate(0deg);}
75%{-webkit-transform:rotate(-200deg);}
90%{-webkit-transform:rotate(-175deg);}
to {-webkit-transform:rotate(-180deg);}
}
@-webkit-keyframes bounceOut {
from {-webkit-transform:rotate(-360deg);}
0% {-webkit-transform:rotate(-180deg);}
10%{-webkit-transform:rotate(-160deg);}
to {-webkit-transform:rotate(-360deg);}
}
@-moz-keyframes bounceIn {
from {-moz-transform:rotate(0deg);}
75%{-moz-transform:rotate(-200deg);}
90%{-moz-transform:rotate(-175deg);}
to {-moz-transform:rotate(-180deg);}
}
@-moz-keyframes bounceOut {
from {-moz-transform:rotate(-360deg);}
0% {-moz-transform:rotate(-180deg);}
10%{-moz-transform:rotate(-160deg);}
to {-moz-transform:rotate(-360deg);}
}
@-ms-keyframes bounceIn {
from {-ms-transform:rotate(0deg);}
75%{-ms-transform:rotate(-200deg);}
90%{-ms-transform:rotate(-175deg);}
to {-ms-transform:rotate(-180deg);}
}
@-ms-keyframes bounceOut {
from {-ms-transform:rotate(-360deg);}
0% {-ms-transform:rotate(-180deg);}
10%{-ms-transform:rotate(-160deg);}
to {-ms-transform:rotate(-360deg);}
}
@-o-keyframes bounceIn {
from {-o-transform:rotate(0deg);}
75%{-o-transform:rotate(-200deg);}
90%{-o-transform:rotate(-175deg);}
to {-o-transform:rotate(-180deg);}
}
@-o-keyframes bounceOut {
from {-o-transform:rotate(-360deg);}
0% {-o-transform:rotate(-180deg);}
10%{-o-transform:rotate(-160deg);}
to {-o-transform:rotate(-360deg);}
}
@keyframes bounceIn {
from {transform:rotate(0deg);}
75%{transform:rotate(-200deg);}
90%{transform:rotate(-175deg);}
to {transform:rotate(-180deg);}
}
@keyframes bounceOut {
from {transform:rotate(-360deg);}
0% {transform:rotate(-180deg);}
10%{transform:rotate(-160deg);}
to {transform:rotate(-360deg);}
}


